<template>
    <div>
        <!--弹出层  添加编辑-->
        <div v-if="visible" :key="modalKey">
            <el-dialog :visible.sync="visible" width="80%" center :before-close="handleClose" append-to-body
                :destroy-on-close="true" :title="''">
                <el-row type="flex" justify="center">
                    <el-col :span="24">
                        <el-tabs v-model="activeKey" @tab-click="handleClick" class="no-bar-tabs"
                            style="display: inline;">
                            <el-tab-pane name="taskFirstDay" label="第1天">
                                <template slot="label">
                                    <div class="tab-label">
                                        <span class="tab-dot">第1天</span>
                                    </div>
                                </template>
                                <ShowTaskList :modalKey="modalKey" v-if="activeKey == 'taskFirstDay'"
                                    :type="activeKey" />
                            </el-tab-pane>
                            <el-tab-pane name="taskSecondDay" label="第2天">
                                <template slot="label">
                                    <div class="tab-label">
                                        <span class="tab-dot">第2天</span>
                                    </div>
                                </template>
                                <ShowTaskList :modalKey="modalKey" v-if="activeKey == 'taskSecondDay'"
                                    :type="activeKey" />
                            </el-tab-pane>
                            <el-tab-pane name="taskThirdDay" label="第3天">
                                <template slot="label">
                                    <div class="tab-label">
                                        <span class="tab-dot">第3天</span>
                                    </div>
                                </template>
                                <ShowTaskList :modalKey="modalKey" v-if="activeKey == 'taskThirdDay'"
                                    :type="activeKey" />
                            </el-tab-pane>
                            <el-tab-pane name="taskFourthDay" label="第4天">
                                <template slot="label">
                                    <div class="tab-label">
                                        <span class="tab-dot">第4天</span>
                                    </div>
                                </template>
                                <ShowTaskList :modalKey="modalKey" v-if="activeKey == 'taskFourthDay'"
                                    :type="activeKey" />
                            </el-tab-pane>
                            <el-tab-pane name="taskFifthDay" label="第5天">
                                <template slot="label">
                                    <div class="tab-label">
                                        <span class="tab-dot">第5天</span>
                                    </div>
                                </template>
                                <ShowTaskList :modalKey="modalKey" v-if="activeKey == 'taskFifthDay'"
                                    :type="activeKey" />
                            </el-tab-pane>
                            <el-tab-pane name="taskSixthDay" label="第6天">
                                <template slot="label">
                                    <div class="tab-label">
                                        <span class="tab-dot">第6天</span>
                                    </div>
                                </template>
                                <ShowTaskList :modalKey="modalKey" v-if="activeKey == 'taskSixthDay'"
                                    :type="activeKey" />
                            </el-tab-pane>

                            <el-tab-pane label="共六天" style="font-size: 26px;" :disabled="true">
                                <template slot="label">
                                    <div>
                                        <span style="font-size: 20px;font-weight: bold;">共6天</span>
                                    </div>
                                </template>
                            </el-tab-pane>
                        </el-tabs>
                    </el-col>
                </el-row>
                <div slot="footer" class="dialog-footer">
                    <pers-button type="primary" round @click="centerDialogVisible = true" label="+继续添加" perms="kanke:exercises:task:content-add"></pers-button>
                    <el-button round style="margin-left: 30px;" @click="handleClose">完成</el-button>
                </div>
            </el-dialog>
        </div>
        <show-content-pop :visible.sync="centerDialogVisible" :current_day="activeKey"></show-content-pop>
    </div>
</template>

<script>
import ShowTaskList from "./ShowTaskList";
import ShowContentPop from "./ShowContentPop";
import PersButton from '../../../../../components/PersButton.vue';
export default {
    name: "showAddTaskList",
    components: {
        ShowTaskList,
        ShowContentPop,
        PersButton
    },
    props: 
    {
        visible: {
            type: Boolean,
            default: false
        }
    },
    data() {
        return {
            activeKey: 'taskFirstDay',
            centerDialogVisible: false, //继续弹框
        }
    },
    created() {
        this.init();
    },
    computed: {
        modalKey() {
            // 路由query.id 加上activeKey
            return `${this.$route.query?.id} ${this.activeKey}`
        }
    },
    methods: {

        init() {
        },
        handleClose() {
            this.$emit('update:visible', false);
        },
        handleClick(tab, event) {
            console.log('current tab', tab.name);
            this.activeKey = tab.name;
        }
    }
}
</script>

<style lang="scss" scoped>
::v-deep .el-dialog__header {
    background: white;
}

::v-deep .el-tabs__nav-wrap::after {
    position: static !important;
}

.el-row--flex.is-justify-center {
    //background-color: #eaeef7; 
}

/* 覆盖禁用状态下的标签样式 */
::v-deep .el-tabs__item.is-disabled {
    color: initial;
    /* 恢复文字颜色 */
    cursor: default;
    /* 将鼠标指针变回默认样式，而非pointer */
    pointer-events: none;
    /* 禁用鼠标事件，即不再响应鼠标点击 */
}

.tab-label {
    display: flex;
    align-items: center;
}

.tab-dot {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 60px;
    height: 37px;
    border-radius: 50%;
    font-size: 16px;
    border: 1px solid;
    //background-color: #D7D7D6;
}

.dot-color {
    background-color: #D7D7D6;
}



//::v-deep .el-dialog__header{
//    background-color:#EAEEF7; /* 设置背景色 */
//}
//::v-deep  .el-dialog {
//    background-color:#EAEEF7; /* 设置背景色 */
//}
::v-deep .el-tabs__active-bar {
    background-color: transparent !important;

}
</style>